<template>
    <div class="home-view">
        <input type="file" @change="handleFileChange" />
        <div v-if="parsedData">
            <div>解析完成</div>
            <button @click="consoleData">打印</button>
        </div>
        <div class="my-table">
            <table class="table-main">
                <th v-for="header in headers" class="header-item"> {{ header }} </th>
                <tr v-for="(row, i) in parsedData" v-show="i >= 4">
                    <td v-for="v in row">{{ v }}</td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import * as XLSX from 'xlsx';
let parsedData = ref(null);
let units = ref([])
let headers = ref([])
const handleFileChange = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        parsedData.value = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    };
    reader.readAsArrayBuffer(file);
}
const consoleData = ()=> {
    console.log(parsedData.value)
    units.value = parsedData.value[1]
    headers.value = parsedData.value[3]
}
</script>

<style scoped>
.home-view {
    width: 100%;
    height: 100%;
    overflow-y: auto;
} 
.my-table {
    width: calc(100vw - 24px);
    margin: 12px;
    line-height: 36px;
    text-align: center;
    overflow-y: auto;
}
.header-item {
    min-width: 100px;
    margin-left: 12px;
    padding: 8px;
    border: 1px solid #ccc;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
}
</style>